<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Register</title>
  </head>
  <style>
  .top{
     width: 400px; 
     height: 400px;
     margin-top: 50px;
     margin: 0 auto;
     line-height:50px;
     box-shadow:0 0px 10px #aaa;
     font-size:25px;
  }
  .up{
     width: 400px; 
     height: 300px;
  }
  .warn{
     width: 900px; 
     height: 30px;
     margin: 0 auto;
     text-align:center;
     color:blue;
  }
  
.middle{
    width: 400px; 
    height: 100px;
    margin: 0 auto;
    text-align:center;
    font-size:20px;
    display: flex;
  }
  .img{
    width: 200px; 
    height: 100px;
  }
  .button{
     width: 110px; 
     height: 30px;
     margin-top: 50px;
     margin: 0 auto;
     box-shadow:0 0px 10px #aaa;
     text-align:center;
  }
  .but{
     width: 110px; 
     height: 30px;
     border:none;
     background:#FFFFFF;
  }
</style>
  <body>
  <form method="POST" th:action="@{/register}" id="registerForm">
  <div class="top">
    <div class="up">
    <h1  align="center">注册</h1> 
  
        <label for="username">用户名: </label>
        <input type="text" name="username"/><br/>

        <label for="password">密码: </label>
        <input type="password" name="password"/><br/>
    
        <label for="phone">电话号码: </label>
        <input type="text" name="phone"/><br/>
        </div>
      <div class="middle">
        <div class="img">
          <img th:src="@{/images/8.jpg}"  width="70" height="100"/>
        </div>
        <div class="img">
          <img th:src="@{/images/9.jpg}"  width="70" height="100"/>
        </div>
     </div>
    </div>
    <div class="button">
        <input class="but" type="submit" value="Register"/>
    </div>
    </form>
    
  </body>
</html>